<template>
    <div class="apple">
       <div class="heade">
           <h1 style="line-height: 50px; font-weight: bold; color:goldenrod; ;">小米品牌商品管理</h1>
       </div>
       <div style="margin-top: 20PX; text-align: center; float: left; padding: 0 110px; width: 100%;">
           <el-select v-model="searchName" placeholder="请选择" class="demo-form-inline" clearable>
               <el-option-group
               v-for="group in options"
               :key="group.label"
               :label="group.label">
                   <el-option
                       v-for="item in group.options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"
                       >
                   </el-option>
               </el-option-group>
           </el-select>
           <addmidata
           style="float: right; margin-right:5%;" 
           v-model="addAppledilog"
           @addAppledata="addAppledata"
           />
       </div>
       <div style="text-align:center; padding-bottom: 30px;">
           <el-row > 
               <el-col :span="8" v-for="(o, index) in pageData" :key="index" :offset="index > 0 ? index : 0" style="margin:20px 30px; width: 300px; height: 300px;" :data="showList">
                       <el-card style="width: 300px; height: 320px">
                           <div>
                               <div style="width: 258px; height: 146px"> 
                                   <img
                                   style="height: 100%;"
                                   :src="o.url"
                                   :fit="index">
                               </div>
                               <h1 style="margin: 5px;">{{o.name}}</h1>
                               <p><span>{{o.color}}</span>     <span>{{o.size}}</span></p>
                               <p>售价：{{o.price}}</p>
                               <p>"{{o.advantage}}"</p>
                               <div class="bottom clearfix">
                                   <el-row>
                                       <el-button icon="el-icon-edit" circle size="mini" @click="showEditDialog = true" ></el-button>
                                           <el-dialog
                                               title="管理员，您好"
                                               :visible.sync="showEditDialog"
                                               width="30%"
                                               center>
                                               <p style="font-size: 14px; letter-spacing:3px; height: 70px; line-height: 20px;">"抱歉，您暂无权限修改商品信息，您可以选择下架该商品或者向商家提出您的需求。"</p>
                                               <span slot="footer" class="dialog-footer">
                                                   <el-button @click="showEditDialog = false">取 消</el-button>
                                                   <el-button type="primary" @click="showDeep"
                                                  >确 定</el-button>
                                               </span>
                                           </el-dialog>
                                           <el-dialog title="意见笺" :visible.sync="showDeepdialog" >
                                               <span style="text-align: left;">请输入您的意见</span>
                                               <el-input
                                                   style="margin-top: 15px;"
                                                   type="textarea"
                                                   :rows="2"
                                                   placeholder="请输入内容"
                                                   v-model="textarea">
                                               </el-input>
                                               <div slot="footer" class="dialog-footer">
                                                   <el-button @click="showDeepdialog = false">取 消</el-button>
                                                   <el-button type="primary" @click="showDeepsuccess">确 定</el-button>
                                               </div>
                                           </el-dialog>
                                       <el-button 
                                           icon="el-icon-delete" 
                                           circle size="mini" 
                                           style="margin-left: 8px;" 
                                           @click="open(o.id)">
                                       </el-button>
                                   </el-row>
                               </div>
                           </div>
                       </el-card>
               </el-col>     
           </el-row>   
       </div>
       <div class="el-page-bottom">
           <el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="currentPage"
               :page-size="pageSize"
               layout="total, prev, pager, next, jumper"
               :total="tableData.filter((d) => d.name.includes(searchName)).length"
               >
           </el-pagination>
       </div>
    </div>
   </template>
   <script>
   import axios from 'axios';
   import addmidata from './addMidata.vue';
   // 初始化 mock 数据
   export default{
    name: 'miphone',
    components: {
        addmidata
    },
    data() {                                                                       
         return {
           currentPage: 1,
           pageSize : 8,
           flag:false,
           tableLength:'',
           searchName:'',
           tableData: [],
           pageData:[], 
           showDeepdialog: false,
           showEditDialog: false,
           addAppledilog: false,
           textarea:'',
           commodityListindex:'',
           commodityList:['mi','mipad','mipods'],
           options: [],
           value: ''  
         }
       },
       watch: {
       showList() {
           this.changePage();
           this.pageUpdata();
           return ""
       },
       searchName() {
           this.pageUpdata(); 

       },
     },
       methods: {
           pageUpdata(){
               this.pageData = this.tableData.filter((d) => d.name.includes(this.searchName))
                       .slice(
                       (this.currentPage - 1) * this.pageSize,
                       this.currentPage * this.pageSize
                   );
           },
           upData(ins){    
                return  axios.get('http://localhost:3001/'+this.commodityList[ins]).then((res) => {
                       this.tableData = res.data;

                       this.tableLength = this.tableData.length,
                       this.changePage();
                       this.pageUpdata();  
                   })
                   .catch((err) => {
                       console.log("数据请求失败!", err);
                   })
                   .finally(() => {  
                       this.loading = false;
                   });               
           },
           handleSizeChange(val) {
               this.pageSize = val;
           },
           handleCurrentChange(val) {
               this.currentPage = val;   
           },
           changePage(){
               let newpage = Math.ceil((this.tableLength)/this.pageSize);
               let currentpages = this.currentPage > newpage ? newpage : this.currentPage;
               this.currentPage = currentpages < 1 ? 1 : currentpages; 
           },
           showDeepsuccess(){
               this.showDeepdialog = false,
               this.$message({
                   message: '您的意见已成功发送至商家٩(●˙ε˙●)۶',
                   type: 'success'
               });
           },
           delectData(index) {
                let ins = this.commodityListindex
                console.log(this.commodityList[ins]);
                axios.delete('http://localhost:3001/'+this.commodityList[ins]+'/'+index).then(()=>{
                    this.upData(this.commodityListindex); 	
                });
           },
           open(ins) {
               this.$confirm('此操作将永久下架该商品, 是否继续?', '提示', {
                       confirmButtonText: '确定',
                       cancelButtonText: '取消',
                       type: 'warning'
                   }).then(() => {
                       this.delectData(ins)
                       this.$message({
                           type: 'success',
                           message: '下架成功!'
                       });
                       }).catch(() => {
                       console.log(ins);
                       this.$message({
                           type: 'info',
                           message: '已取消删除'
                   });          
               });
           },
           showDeep(){
               this.showDeepdialog = true;
               this.showEditDialog = false;
           },
           addAppledata(val,ins){

               let result = this.tableData.some(e => {
                   return val.name == e.name && val.color == e.color &&  val.size == e.size  
               })

               if(result){
                   this.$message.error('已存在该商品');
               }else{
                if(this.tableData.length === 0){

                    val.id = 0
                } else{val.id = this.tableData[this.tableData.length-1].id+1;}
                    let ins = this.commodityListindex
                    val.url = '../commodityimages/'+ val.name + val.color +'.png',
                    axios.post('http://localhost:3001/'+this.commodityList[ins], val).then(()=>{
                        this.upData(this.commodityListindex)
                        this.changePage()
                        this.$message.success('商品上架成功');
                    }) 	   
               }    
           }
       },
       computed: {
           showList() {
               this.changePage();
               this.pageUpdata();
                return "" 
           },   
       },
       mounted() {
        axios.get('http://localhost:3001/mishowlistindex').then((res) => {
          this.commodityListindex = res.data[0].index
          this.upData(this.commodityListindex);
                   })
        axios.get('http://localhost:3001/miOptions').then((res) => {
          this.options = res.data
                   })
     }
   }
   </script>
   
   <style scoped lang='less'>
   .apple .heade{
       height: 50px;
       background:linear-gradient(rgb(34, 29, 1),rgb(68, 57, 27));
       border-radius: 3px;
       text-align: center;
   };
   .demo-form-inline{
       width: 400px;
       float: left;
       text-align: center;
   }
   .time {
       font-size: 13px;
       color: #999;
     }
     .bottom {
       margin-top: 13px;
       margin-left: 180px;
       line-height: 12px; 
     }
     .button {
       padding: 0;
       float: right;
     }
     .image {
       width: 100%;
       display: block;
     }
     .clearfix:before,
     .clearfix:after {
         display: table;
         content: "";
     }
     .clearfix:after {
         clear: both
     }
     h1{
       font-size: large;
       color:rgba(31, 32, 29, 0.5)
     }
     p{
       font-size: small;
       margin: 7px;
     }
     .el-icon-more{
       width: 200%; 
       height: 18%; 
       border:1px solid rgba(31, 32, 29, 0.5); 
       left:1300%; 
       text-align: center; 
       line-height: 130%;
       border-radius: 5px;
     }
     .el-row {
       width: 100%;
       padding-left: 7%;
       display: flex;
       justify-content:flex-start;
       flex-wrap: wrap;
     }
     .el-page-bottom{
       width: 100%;
       position: relative;
       text-align: center;
       bottom: 0;
     }
   </style>
